<template>
  <div class="filter_condition"
       :class="tab?'filter_condition_focus':''">
    <div class="operation_panel"
         @click="toggelFilterTabs">
      <div class="panel_left">
        <span class="panel_left_icon"></span>
        <span>Filter</span>
      </div>
      <div class="panel_right"
           v-if="num>0">
        <span class="filter_num">{{num === 0 ? '' : num}}</span>
        <span>Filters</span>
        <span class="focus_pgup icon_dismiss cuifont"
              @click="clearEveryFilter"></span>
      </div>
    </div>
    <div class="panel_content2"
         v-show="tab"
         @click.stop="">
      <div class="panel_content_select">

        <div class="pannel_select">
          <div class="condition_label">Ready</div>
          <inputNumber :defaultModel="filterForm.ready"
                       @inputChange="inputChange"></inputNumber>
        </div>
        <div class="pannel_select">
          <div class="condition_label">Received</div>
          <inputNumber :defaultModel="filterForm.received"
                       @inputChange="inputChange"></inputNumber>
        </div>
        <div class="pannel_select">
          <div class="condition_label">Read</div>
          <inputNumber :defaultModel="filterForm.read"
                       @inputChange="inputChange"></inputNumber>
        </div>
        <!-- <div class="pannel_select">
          <div class="condition_label">Last Synced Date</div>
          <el-date-picker
            v-model="filterForms.LastSyncedDateModel"
            type="datetimerange"
            unlink-panels
            @change="dateChange"
            range-separator="-"
            :start-placeholder="$t('datePicker.start')"
            :end-placeholder="$t('datePicker.end')">>
          </el-date-picker>
        </div> -->
        <div class="pannel_select ">
          <div class="condition_label">Tag</div>

          <el-select v-model="filterForm.tagList"
                     filterable
                     multiple
                     collapse-tags
                     clearable
                     size="mini"
                     :placeholder="$t('select')"
                     @change="inputChange">
            <el-option v-for="(item,index) in tags"
                       :key="index"
                       :label="item.name"
                       :value="item.id">

            </el-option>
          </el-select>
        </div>
        <div class="pannel_select" v-if="isShowShare">
          <div class="condition_label">{{$t('custom.dataset.shared')}}</div>
          <el-select v-model="filterForm.shared"
                     size="mini"
                     placeholder="Please select"
                     clearable
                     @change="typeChange">
            <el-option v-for="item in shareOptions"
                       :key="item"
                       :label="item"
                       :value="item">
            </el-option>
          </el-select>
        </div>
        <div class="pannel_select">
          <div class="condition_label">Created Date</div>
          <el-date-picker v-model="filterForms.createdDateModel"
                          type="datetimerange"
                          unlink-panels
                          @change="dateChange"
                          range-separator="-"
                          :start-placeholder="$t('datePicker.start')"
                          :end-placeholder="$t('datePicker.end')">>
          </el-date-picker>
        </div>
        <div class="pannel_select ">
          <div class="condition_label">Creator</div>
          <el-select v-model="filterForm.creator"
                     filterable
                     multiple
                     size="mini"
                     placeholder="Please select"
                     popper-class="user_select"
                     @change="typeChange">
            <el-option v-for="item in userOption"
                       :key="item.id"
                       :label="item.realName"
                       :value="item.id">
              <div class="user_option">
                <el-avatar :size="40"
                           class="header_img"
                           :src="item.headUrl">
                </el-avatar>
                <div class="header_name">{{item.realName}}</div>
                <div class="header_select"></div>
              </div>
            </el-option>
          </el-select>
        </div>
        <div class="pannel_select">
          <div class="condition_label">Update Date</div>
          <el-date-picker v-model="filterForms.lastModifiedDateModel"
                          type="datetimerange"
                          unlink-panels
                          @change="dateChange"
                          range-separator="-"
                          :start-placeholder="$t('datePicker.start')"
                          :end-placeholder="$t('datePicker.end')">
          </el-date-picker>
        </div>
        <div class="pannel_select ">
          <div class="condition_label">Updater</div>
          <el-select v-model="filterForm.updateBy"
                     filterable
                     multiple
                     size="mini"
                     placeholder="Please select"
                     popper-class="user_select"
                     @change="typeChange">
            <el-option v-for="item in userOption"
                       :key="item.id"
                       :label="item.realName"
                       :value="item.id">
              <div class="user_option">
                <el-avatar :size="40"
                           class="header_img"
                           :src="item.headUrl">
                </el-avatar>
                <div class="header_name">{{item.realName}}</div>
                <div class="header_select"></div>
              </div>
            </el-option>
          </el-select>
        </div>
        <!-- <div class="pannel_select ">
          <div class="condition_label">Owner</div>
          <el-select v-model="filterForm.owner" multiple filterable size="mini" placeholder="Please select" popper-class="user_select" @change="typeChange">
            <el-option
              v-for="item in userOption"
              :key="item.id"
              :label="item.realName"
              :value="item.id">
              <div class="user_option">
                <el-avatar :size="40" class="header_img"
                          :src="item.headUrl">
                </el-avatar>
                <div class="header_name">{{item.realName}}</div>
                <div class="header_select"></div>
              </div>
            </el-option>
          </el-select>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import inputNumber from '@/components/viewComponents/input-number-model'
export default {
  components: { inputNumber },
  props: {
    options: {
      type: Array
    },
    conditionItem: {
      type: String
    }
  },
  watch: {
    conditionItem: function (val) {
      if (val === 'filter') this.tab = true
      else this.tab = false
    }
  },
  data () {
    return {
      fontSize: false,
      num: 0,
      tab: false,
      filterForms: {
        LastSyncedDateModel: null,
        createdDateModel: null,
        lastModifiedDateModel: null
      },
      filterForm: {
        'type': [],
        'status': [],
        tagList: [],
        'createDate': {
          'from': '',
          'to': ''
        },
        'updateDate': {
          'from': '',
          'to': ''
        },
        'creator': [],
        'updateBy': [],
        'ready': {
          min: undefined,
          max: undefined
        },
        'received': {
          min: undefined,
          max: undefined
        },
        'read': {
          min: undefined,
          max: undefined
        }
      },
      userOption: [],
      tags: [],
      shareOptions: ['Shared', 'Not Shared'],
      isShowShare: false
    }
  },
  computed: {
    // businessTypeList () {
    //   try {
    //     let tempList = []
    //     if (this.$hasPermission('sys:bot:type:mspbots internal')) {
    //       tempList.push({ dictLabel: 'MSPbots Internal', dictValue: 'MSPbots Internal' })
    //     }
    //     if (this.$hasPermission('sys:bot:type:custom')) {
    //       tempList.push({ dictLabel: 'Custom', dictValue: 'Custom' })
    //     }
    //     if (this.$hasPermission('sys:bot:type:template')) {
    //       tempList.push({ dictLabel: 'Template', dictValue: 'Template' })
    //     }
    //     return tempList
    //   } catch (error) {
    //     return []
    //   }
    // },
    businessTypeList () {
      try {
        if (this.$hasPermission('sys:widget:type:mspbots internal') && this.$route.path.includes('CrossTenant')) {
          return window.SITE_CONFIG['dictList'].find(e => e.dictType === 'datasets_type_list').dataList.filter(item => {
            return item.dictValue === 'MSPbots Internal'
          })
        } else {
          return window.SITE_CONFIG['dictList'].find(e => e.dictType === 'datasets_type_list').dataList.filter(item => {
            return item.dictValue !== 'MSPbots Internal'
          })
        }
      } catch (error) {
        return []
      }
    }
    // statusList () {
    //   try {
    //     let tempList = []
    //     if (this.$hasPermission('sys:bot:status:alpha')) {
    //       tempList.push({ dictLabel: 'Alpha', dictValue: 'Alpha' })
    //     }
    //     if (this.$hasPermission('sys:bot:status:requested')) {
    //       tempList.push({ dictLabel: 'Requested', dictValue: 'Requested' })
    //     }
    //     if (this.$hasPermission('sys:bot:status:in-dev')) {
    //       tempList.push({ dictLabel: 'In-Dev', dictValue: 'In-Dev' })
    //     }
    //     if (this.$hasPermission('sys:bot:status:published')) {
    //       tempList.push({ dictLabel: 'Published', dictValue: 'Published' })
    //     }
    //     if (this.$hasPermission('sys:bot:status:in-qa')) {
    //       tempList.push({ dictLabel: 'In-QA', dictValue: 'In-QA' })
    //     }
    //     return tempList
    //   } catch (error) {
    //     return []
    //   }
    // }

  },

  created () {
    this.query()
    this.getTags()
    this.$root.eventBus.$on('bus:tag-refresh', this.getTags)
    this.isShowShare = this.$route.path === '/Bots'
  },

  beforeDestroy () {
    this.$root.eventBus.$off('bus:tag-refresh')
  },
  methods: {
    toggelFilterTabs () {
      this.tab = !this.tab
      this.$emit('tabTitle', {
        tab: this.tab,
        text: 'filter'
      })
    },
    extractUserBegin (str) {
      return str.substring(0, 1) + str.substring(str.indexOf(' '), str.indexOf(' ') + 2).trim()
    },
    dataSetFilterNum () {
      this.num = 0
      for (const key in this.filterForm) {
        if (Object.hasOwnProperty.call(this.filterForm, key)) {
          const element = this.filterForm[key]
          if ((Array.isArray(element) && element.length > 0) || ((key === 'read' || key === 'ready' || key === 'received') && !(!element.min && !element.max))) this.num++
        }
      }
      for (const key in this.filterForms) {
        if (Object.hasOwnProperty.call(this.filterForms, key)) {
          const element = this.filterForms[key]
          if (Array.isArray(element) && element.length > 0) this.num++
        }
      }
    },
    typeChange (val) {
      this.dataSetFilterNum()
      this.$emit('filterProjectForm', this.filterForm)
    },
    dateChange (val) {
      if (this.filterForms.createdDateModel) {
        this.filterForm.createDate.from = this.fromatUtcDate(this.filterForms.createdDateModel[0])
        this.filterForm.createDate.to = this.fromatUtcDate(this.filterForms.createdDateModel[1])
      } else {
        this.filterForm.createDate.from = ''
        this.filterForm.createDate.to = ''
      }
      if (this.filterForms.lastModifiedDateModel) {
        this.filterForm.updateDate.from = this.fromatUtcDate(this.filterForms.lastModifiedDateModel[0])
        this.filterForm.updateDate.to = this.fromatUtcDate(this.filterForms.lastModifiedDateModel[1])
      } else {
        this.filterForm.updateDate.from = ''
        this.filterForm.updateDate.to = ''
      }
      this.dataSetFilterNum()
      this.$emit('filterProjectForm', this.filterForm)
    },
    fromatUtcDate (date) {
      /** =============== MB-14684 =============== */
      return moment.tz(moment(date).format('YYYY-MM-DD HH:mm:ss'), this.$store.state.user.timezoneId).utc().format()
      /** =============== MB-14684 =============== */
    },
    async getTags () {
      try {
        const { tags } = this.$interface.reports
        const { get } = this._
        const params = {}

        const { data: response } = await tags(params)

        if (response.code !== 0) {
          throw get(response, 'msg', '')
        }

        this.tags = get(response, 'data', [])
      } catch (error) {

      } finally {

      }
    },
    query () {
      var _self = this
      // _self.gadgetSetting = this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      const params = {
        status: 1,
        excludeRegSource: [3]
      }
      this.$interface.schedule.getWorkScheduledUserListApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          _self.userOption = res.data
          _self.userOption = _self.userOption.sort(function (a, b) {
            return a.username.localeCompare(b.username)
          })
        })
        .catch(() => {
        })
    },
    clearEveryFilter (e) {
      e.stopPropagation()
      if (this.num === 0) return
      this.filterForm = {
        'type': [],
        'status': [],
        'createDate': {
          'from': '',
          'to': ''
        },
        'updateDate': {
          'from': '',
          'to': ''
        },
        'creatorName': [],
        'updateByName': [],
        'ready': {
          min: undefined,
          max: undefined
        },
        'received': {
          min: undefined,
          max: undefined
        },
        'read': {
          min: undefined,
          max: undefined
        }
      }
      this.filterForms.LastSyncedDateModel = null
      this.filterForms.createdDateModel = null
      this.filterForms.lastModifiedDateModel = null
      this.num = 0
      this.$emit('filterProjectForm', this.filterForm)
    },
    inputChange () {
      this.dataSetFilterNum()
      this.$emit('filterProjectForm', this.filterForm)
    }
  }
}
</script>
<style lang="scss">
.filter_condition {
  margin-bottom: 4px;

  cursor: pointer;
  .operation_panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    padding: 6px 16px;
    .panel_left {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .panel_left_icon {
        width: 14px;
        height: 14px;
        display: inline-block;
        background-image: url("#{$--ossLink}/app/view_pageheader/filter_catalogue.png");
        background-repeat: no-repeat;
        background-size: 14px;
        background-position: center;
        margin-right: 10px;
      }
    }
    .panel_right {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 28px;
      background: $--theme-color-background;
      border-radius: 4px;
      padding: 0 8px;
      cursor: pointer;
      .filter_num {
        margin-right: 5px;
      }
      span {
        color: $--theme-color;
        font-weight: 400;
      }
      .focus_pgup {
        width: 12px;
        height: 12px;
        margin-left: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .focus_pgup::before {
        font-size: 12px;
        color: $--theme-color;
      }
    }
  }
  .panel_content2 {
    // display: none;
    // max-height: 557px;
    // overflow-y: auto;
    padding: 0 16px 16px;
    .panel_content_select {
      padding: 0px 0;
      .pannel_select:last-child {
        margin-bottom: 0;
      }
      .pannel_select {
        margin-bottom: 10px;
        .el-select,
        .el-date-editor {
          width: 100%;
        }
        .el-input__inner {
          height: 28px;
        }
        input::placeholder {
          font-size: 12px;
        }
        .condition_label {
          margin-bottom: 5px;
          font-size: 14px;
          font-weight: 400;
          color: #404040;
          line-height: 20px;
        }
        .link_widgets_input {
          .el-input__inner {
            padding-right: 20px;
            padding-left: 20px;
            ::v-deep input::placeholder {
              color: #909399;
            }
          }
          ::v-deep input::placeholder {
            color: #909399;
          }
          .el-input__suffix {
            right: 0;
          }
          .el-input-number {
            line-height: 28px;
            .el-input-number__decrease {
              width: 26px;
              height: 26px;
            }
            .el-input-number__increase {
              width: 26px;
              height: 26px;
            }
          }
        }
        .link_widgets_input {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .span_blank {
            margin: 0 6px;
            display: inline-block;
            width: 9px;
            border: 1px solid #404040;
          }
        }
        .el-cascader {
          margin-bottom: 5px;
          line-height: 28px;
        }
        .el-date-editor .el-range__icon {
          line-height: 20px;
        }
        .el-range-separator {
          line-height: 20px;
        }
        .el-date-editor .el-range__close-icon {
          line-height: 20px;
        }
      }
    }
  }
}
.filter_condition:hover {
  background-color: #f6f7f9;
}
.filter_condition_focus {
  background-color: #f6f7f9;
}
.user_select {
  .el-select-dropdown__item {
    padding: 0 10px;
  }
  .selected {
    .header_select {
      background-image: url("#{$--ossLink}/app/view_pageheader/user_selected.png");
      background-repeat: no-repeat;
      background-size: 14px;
      background-position: center;
    }
  }
  .user_option {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .header_img {
      width: 28px !important;
      height: 28px !important;
      line-height: 28px !important;
      text-align: center;
      margin-right: 10px;
      color: #fff;
      font-size: 12px;
      border-radius: 50%;
    }
    .header_name {
      flex: 1;
    }
    .header_select {
      width: 14px;
      height: 14px;
    }
  }
}
</style>
